window.onload= function () {
	
	item = document.getElementsByClassName('item');
	citem = document.getElementsByClassName('citem');

	// console.log(item);
	num = 0;
	function run() {

		for (var i = 0; i < item.length; i++) {
			item[i].style.display="none";
			citem[i].style.background="rgba(0,0,0,0.5)";
		}

		item[num].style.display="block";
		citem[num].style.background="rgba(255,255,255,0.5)";


		if(num==item.length-1){
			num = 0
		}else{
			num++;
		}

	}

	time = setInterval(run,1000)


	banner = document.getElementById("banner")

	banner.onmouseover= function(){
		clearInterval(time);
	}

	banner.onmouseout= function(){
		time = setInterval(run,1000)
	}


	for (var i = 0; i < citem.length; i++) {
		citem[i].index = i;
		citem[i].onclick = function(){
			num = this.index;
			run();
		}
	}

	console.log(citem);

	click_right = document.getElementById("click_right")
	click_left = document.getElementById("click_left")

	click_right.onclick= function(){
		run();
	}

	click_left.onclick= function(){
		console.log(num);
		if(num==1){
			num = citem.length-1;
		}else if(num==0){
			num = citem.length-2;
		}else{
			num -=2;
		}
		run();
	}

}